<template>
	<SearchTable :search='searchConfig' :table='tableConfig' :control='controlsConfig'/>
</template>

<script setup>
	const SearchTable 	= $.lazy(()=>import('#cpt/temp/SearchTable.vue'))
	/* ---------------------------  提交表单 --------------------------- */
	const controlsConfig = {
		title: '多选联动',
		controls	: [
			{ mode:'del', api:'del' },
			{ mode:'confirm', label:'启用', api:'enable', isKeys:1, isStr:1, ref:()=>tableRef, r:1 },
		]
	}
	/* ---------------------------  提交表单 --------------------------- */
	const searchConfig = {
		data: [
			{ label:'名称', 	name:'name' },
		]
	}
	/* ---------------------------  表格数据 --------------------------- */
	let tableRef = $ref()
	let tableConfig = $ref({
		idStr 		: 'id',						// 要选择的字段名
		// api 		: 'list',					// 表单列表接口
		// ctrApi 	: 'controls',				// 表单增改删接口
		param 		: { },						// 搜索可变参数
		query 		: { },						// 搜索固定参数
		paging 		: true,						// 是否分页
		cols		: [
			{ title: '名称', 	dataIndex: 'name' },
			{ title: '内容', 	dataIndex: 'content' },
		],
		data		: [
			{ name:'Vue', content:'vue', id:1 },
			{ name:'React', content:'react', id: 2 },
			{ name:'Java', content:'java', id: 3 },
			{ name:'Spring', content:'spring', id: 4 },
			{ name:'Angular', content:'angular', id: 5 },
			{ name:'Canvas', content:'canvas', id: 6 },
		],
		row			: {
			// type : 0, 				// 0: 多选，1：单选
			keys: [1,2],
			change : ({ keys, rows }) => {
				console.log( 'keys', keys )
				console.log( 'rows', rows() )
			},
			disabledKeys : ({ id }) => id > 5
		},
		onRowClass: ({ id }) => id === 5 ? 'danger' : null,
		controls 	: {
			// type: 'dropdown',
			width: 400,
			data: ({ name }) => [
				{ mode:'delPop', label:'删除-可选参数', api:'del', param:{ name} },
				{ mode:'delPop', label:'删除-必选参数', api:'del', abs:1 },
				{ mode:'del', label:'删除-参数为数组', api:'del', mul:1 },
			]
		}
	})
</script>
<style>
	.danger td:not(.ant-table-cell-fix-right){background-color: red!important; color:#fff}
</style>